<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>轮播图</title>

    <script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>


</head>
<body>
       <div class="wrapper">

       </div>

       <div id="pxs_container" class="pxs_container">
            <div class="pxs_bg">
                 <div class="pxs_bg1"></div>
                 <div class="pxs_bg2"></div>
                 <div class="pxs_bg3"></div>
             </div>
          <div class="pxs_loading">Loading images...</div>
          <div class="pxs_slider_wrapper">
              <ul class="pxs_slider">
                  <li><img src="./img/3.jpg" alt="First Image" /></li>
                  <li><img src="./img/1.jpg" alt="Second Image" /></li>
                  <li><img src="./img/2.jpg" alt="Third Image" /></li>
                  <li><img src="./img/3.jpg" alt="Forth Image" /></li>
                  <li><img src="./img/1.jpg" alt="Fifth Image" /></li>
                  <li><img src="./img/2.jpg" alt="Sixth Image" /></li>
              </ul>
              <div class="pxs_navigation">
                  <span class="pxs_next"></span>
                  <span class="pxs_prev"></span>
              </div>
              <ul class="pxs_thumbnails">
                  <li><img src="./img/3.1.jpg" alt="First Image" /></li>
                  <li><img src="./img/1.1.jpg" alt="Second Image" /></li>
                  <li><img src="./img/2.1.jpg" alt="Third Image" /></li>
                  <li><img src="./img/3.1.jpg" alt="Forth Image" /></li>
                  <li><img src="./img/1.1.jpg" alt="Fifth Image" /></li>
                  <li><img src="./img/2.1.jpg" alt="Sixth Image" /></li>
              </ul>
          </div>
       </div>

       <script>
           var oLoad = getByClass(document.body, 'pxs_loading')[0];
           var oImgBox = getByClass(document.body,'pxs_slider_wrapper')[0];
           //var oEvent=ev||event;
           //var obj=oEvent.srcElement||oEvent.target;
           var imgs = document.getElementsByTagName('img');
           for(var i=0;i<imgs.length;i++)
           {
               imgs[i].onload = function()
               {
                   oLoad.style.display = 'none';
               }
               oImgBox.style.display = 'block';
           }
       </script>

</body>
</html>